<template>
    <main-layout>
        <!-- Hero Section -->
        <div class="relative bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8">
                <!-- Tabs -->
                <div class="border-b border-gray-200" v-motion :initial="{ opacity: 0, y: -100 }"
                    :enter="{ opacity: 1, y: 0 }" :transition="{ duration: 2000, ease: 'easeOut' }" when-visible>
                    <nav class="-mb-px flex space-x-8">
                        <button v-for="tab in tabs" :key="tab.key" @click="activeTab = tab.key"
                            class="relative whitespace-nowrap pb-4 px-1 font-medium group" :class="[
                                activeTab === tab.key
                                    ? 'text-red-500'
                                    : 'text-gray-500 hover:text-red-500'
                            ]">
                            <span>{{ $t(tab.label) }}</span>
                            <span
                                class="absolute bottom-0 left-0 w-full h-0.5 bg-red-500 transform transition-transform duration-300 ease-out"
                                :class="activeTab === tab.key ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"></span>
                        </button>
                    </nav>
                </div>

                <!-- Content -->
                <div class="mt-12">
                    <!-- 第一个tab的内容 -->
                    <div v-if="activeTab === 'prototyping'" class="lg:grid lg:grid-cols-2 lg:gap-8">
                        <!-- 左侧内容区域 -->
                        <div>
                            <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl" v-motion
                                :initial="{ opacity: 0, x: -100 }" :enter="{ opacity: 1, x: 0 }"
                                :transition="{ duration: 600, delay: 600 + (index * 200) }">
                                {{ $t('home.hero.prototyping.title') }}
                            </h1>
                            <p class="mt-4 text-lg text-gray-500" v-motion :initial="{ opacity: 0, x: -100 }"
                                :enter="{ opacity: 1, x: 0 }" :transition="{ duration: 1500, delay: 400 }">
                                {{ $t('home.hero.prototyping.description') }}
                            </p>
                            <ul class="mt-8 space-y-3">
                                <li v-for="(feature, index) in $tm('home.hero.prototyping.features')" :key="index" class="flex items-center" v-motion
                                    :initial="{ opacity: 0, x: -100 }" :enter="{ opacity: 1, x: 0 }"
                                    :transition="{ duration: 600, delay: 600 + (index * 200) }">
                                    <span class="flex-shrink-0 w-5 h-5 text-red-500">
                                        <CheckCircleIcon class="w-5 h-5" />
                                    </span>
                                    <span class="ml-3 text-gray-600">{{ $t(feature) }}</span>
                                </li>
                            </ul>
                            <div class="mt-8 space-x-4" v-motion :initial="{ opacity: 0, x: -100 }"
                                :enter="{ opacity: 1, x: 0 }" :transition="{ duration: 800, delay: 1400 }">
                                <button
                                    class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-500 hover:bg-red-600">
                                    {{ $t('home.hero.primaryButton') }}
                                </button>
                                <button
                                    class="inline-flex items-center px-6 py-3 border border-red-500 text-base font-medium rounded-md text-red-500 bg-white hover:bg-red-50">
                                    {{ $t('home.hero.secondaryButton') }}
                                </button>
                            </div>
                        </div>

                        <!-- 右侧上传区域 -->
                        <div class="mt-12 lg:mt-0" v-motion :initial="{ opacity: 0, x: 100 }"
                            :enter="{ opacity: 1, x: 0 }" :transition="{ duration: 2000, delay: 400, ease: 'easeOut' }"
                            when-visible>
                            <div
                                class="bg-gray-50 rounded-lg p-8 transform transition-all duration-500 ease-out hover:shadow-xl hover:-translate-y-1 hover:bg-white">
                                <h2 class="text-2xl font-bold text-gray-900" v-motion :initial="{ opacity: 0, x: 100 }"
                                    :enter="{ opacity: 1, x: 0 }" :transition="{ duration: 800, delay: 400 }">
                                    {{ $t('home.hero.uploadTitle') }}
                                </h2>
                                <p class="mt-3 text-gray-600">
                                    {{ $t('home.hero.uploadDescription') }}
                                </p>
                                <div class="mt-6 border-2 border-dashed border-gray-300 rounded-lg p-12 text-center 
                          transition-all duration-300 ease-out
                          hover:border-red-300 hover:bg-red-50/30 
                          group cursor-pointer">
                                    <div
                                        class="text-red-500 mx-auto transform transition-transform duration-500 ease-out group-hover:scale-110">
                                        <FolderIcon class="w-12 h-12 mx-auto" />
                                    </div>
                                    <p
                                        class="mt-4 text-gray-600 transition-colors duration-300 group-hover:text-red-500">
                                        {{ $t('home.hero.dropzoneText') }}
                                    </p>
                                    <p
                                        class="mt-2 text-sm text-gray-500 transition-colors duration-300 group-hover:text-gray-600">
                                        STEP | STP | STL | IGS | IGES | PRT | SLDPRT | SAT | X_T
                                    </p>
                                    <p
                                        class="mt-1 text-sm text-gray-500 transition-colors duration-300 group-hover:text-gray-600">
                                        {{ $t('home.hero.maxFileSize') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 第二个tab的内容 -->
                    <div v-else class="lg:grid lg:grid-cols-2 lg:gap-8">
                        <!-- 左侧内容区域 -->
                        <div class="order-2 md:order-1" v-motion-slide-visible-once-left>
                            <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl mb-6">
                                {{ $tm('home.hero.production.title') }}
                            </h1>
                            <p class="mt-4 text-lg text-gray-500 mb-8">
                                {{ $tm('home.hero.production.description') }}
                            </p>
                            <ul class="mt-8 space-y-3">
                                <li v-for="(feature, index) in $tm('home.hero.production.features')" :key="index"
                                    class="flex items-center space-x-3">
                                    <span class="flex-shrink-0 w-5 h-5 text-red-500">
                                        <CheckCircleIcon class="w-5 h-5" />
                                    </span>
                                    <span class="ml-3 text-gray-600">{{ feature }}</span>
                                </li>
                            </ul>
                            <!-- 添加按钮，与第一个tab保持一致 -->
                            <div class="mt-8 space-x-4">
                                <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-500 hover:bg-red-600">
                                    {{ $t('home.hero.primaryButton') }}
                                </button>
                                <button class="inline-flex items-center px-6 py-3 border border-red-500 text-base font-medium rounded-md text-red-500 bg-white hover:bg-red-50">
                                    {{ $t('home.hero.secondaryButton') }}
                                </button>
                            </div>
                        </div>

                        <!-- 右侧内容区域 -->
                        <div class="order-1 md:order-2 mt-12 lg:mt-0" v-motion-slide-visible-once-right>
                            <div class="bg-gray-50 rounded-lg p-8 transform transition-all duration-500 ease-out hover:shadow-xl hover:-translate-y-1 hover:bg-white">
                                <div class="aspect-video bg-gray-100 rounded-lg overflow-hidden">
                                    <!-- 这里可以放置实际的平台界面图片 -->
                                    <img src="/images/factory/factory.png" alt="Platform Interface" 
                                        class="w-full h-full object-cover transition-transform duration-700 hover:scale-105">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Logo Slider -->
        <div class="relative bg-white">

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" v-motion :initial="{ opacity: 0, y: 100 }"
                :enter="{ opacity: 1, y: 0 }" :transition="{ duration: 2000, ease: 'easeOut' }" when-visible>
                <div class="logo-container">
                    <div class="logo-wrapper" ref="logoWrapper">
                        <div class="logo-slide" :style="slideStyle">
                            <div v-for="logo in displayLogos" :key="logo.id" class="logo-item-wrapper">
                                <img :src="logo.src" :alt="logo.alt" class="logo-item">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Our Manufacturing Services -->
        <div class="relative bg-gray-50 manufacturing-services-section" v-motion-slide-visible-once-bottom >
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <!-- Section Header -->
                <div class="text-center mb-12" >
                    <h2 class="text-3xl font-bold text-gray-900 sm:text-4xl">
                        {{ $t('home.services.title') }}
                    </h2>
                    <p class="mt-4 max-w-3xl mx-auto text-lg text-gray-600">
                        {{ $t('home.services.description') }}
                    </p>
                </div>

                <!-- Services Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div v-for="(service, index) in manufacturingServices" 
                         :key="service.id"
                         class="manufacturing-service-card bg-white rounded-lg overflow-hidden cursor-pointer transform transition-all duration-500 ease-out hover:shadow-xl hover:-translate-y-1 hover:bg-white"
                         v-motion
                         :initial="{ opacity: 0, y: 50 }"
                         :enter="{ opacity: 1, y: 0 }"
                         :delay="index * 200"
                         :transition="{ duration: 500 }">
                        <div class="p-6 h-full flex flex-col group card-content">
                            <div class="flex items-center justify-between service-header">
                                <h3
                                    class="text-xl font-semibold text-gray-900 group-hover:text-red-500 transition-colors duration-300">
                                    {{ $t(service.title) }}
                                </h3>
                                <svg class="w-5 h-5 text-gray-400 transform transition-all duration-500 ease-out"
                                    :class="{ 'rotate-90 text-red-500': service.isActive, 'group-hover:translate-x-1': !service.isActive }"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 5l7 7-7 7" />
                                </svg>
                            </div>

                            <div class="mt-4 flex-grow">
                                <p
                                    class="text-gray-600 text-sm service-description group-hover:text-gray-800 transition-colors duration-300">
                                    {{ $t(service.description) }}
                                </p>
                            </div>

                            <div class="mt-6 service-image-wrapper overflow-hidden">
                                <img :src="service.image" :alt="service.title"
                                    class="w-full h-48 object-contain transition-all duration-700 ease-out group-hover:scale-110 group-hover:rotate-2">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Streamline Manufacturing Process on Our Platform -->
        <div class="relative bg-white streamline-section py-24 overflow-hidden" v-motion-slide-visible-once-bottom>
            <div class="absolute inset-0 bg-gradient-to-b from-gray-50/80 to-white/30 pointer-events-none"></div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
                <!-- Section Header -->
                <div class="text-center mb-16 max-w-3xl mx-auto" v-motion :initial="{ opacity: 0, y: 50 }"
                    :enter="{ opacity: 1, y: 0 }" :transition="{ duration: 1000, ease: 'easeOut' }">
                    <h2 class="text-4xl font-bold text-gray-900 sm:text-5xl mb-6">
                        {{ $t('home.streamline.title') }}
                    </h2>
                    <p class="text-xl text-gray-600 leading-relaxed">
                        {{ $t('home.streamline.subtitle') }}
                    </p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
                    <!-- 左侧功能列表 -->
                    <div class="grid grid-cols-1 gap-6">
                        <div v-for="value, key in $tm(`home.streamline.features`)" :key="key"
                            @click="activeFeature = key"
                            class="feature-item bg-white rounded-xl transition-all duration-300 hover:shadow-lg" :class="[
                                activeFeature === key
                                    ? 'border-l-4 border-red-500 shadow-md'
                                    : 'border border-gray-100 hover:border-red-200'
                            ]">

                            <div class="p-6">
                                <!-- 标题区域 -->
                                <div class="flex items-center justify-between cursor-pointer">
                                    <h3 class="text-lg font-medium transition-colors duration-300"
                                        :class="[activeFeature === key ? 'text-red-500' : 'text-gray-800']">
                                        {{ $t(`home.streamline.features.${key}.title`) }}
                                    </h3>
                                    <div class="transition-transform duration-300 ease-in-out"
                                        :class="[activeFeature === key ? 'rotate-180' : '']">
                                        <ChevronDownIcon class="w-5 h-5"
                                            :class="[activeFeature === key ? 'text-red-500' : 'text-gray-400']" />
                                    </div>
                                </div>

                                <!-- 内容区域 -->
                                <div class="content-wrapper" :class="[activeFeature === key ? 'mt-4' : 'h-0']">
                                    <div class="overflow-hidden transition-all duration-300"
                                        :class="[activeFeature === key ? 'opacity-100' : 'opacity-0']">
                                        <p class="text-gray-600 text-sm leading-relaxed mb-4">
                                            {{ $t(`home.streamline.features.${key}.description`) }}
                                        </p>

                                        <ul class="space-y-3">
                                            <li v-for="value, index in $tm(`home.streamline.features`)" :key="index"
                                                class="flex items-start text-sm text-gray-600 hover:text-gray-900 transition-colors duration-200">
                                                <CheckIcon class="w-4 h-4 text-red-500 mr-2 mt-0.5 flex-shrink-0" />
                                                <span>{{ $t(`home.streamline.features.${key}.details.${index - 1}`)
                                                    }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧图片展示 -->
                    <div class="relative h-[600px] rounded-2xl overflow-hidden shadow-2xl" v-motion
                        :initial="{ opacity: 0, x: 50 }" :enter="{ opacity: 1, x: 0 }" :transition="{ duration: 1000 }">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-gray-900/20 to-transparent pointer-events-none z-10">
                        </div>
                        <TransitionGroup name="fade" class="relative h-full" tag="div">
                            <img v-for="(image, key) in featureImages" :key="key" v-show="activeFeature === key"
                                :src="image"
                                class="absolute inset-0 w-full h-full object-cover transition-transform duration-700"
                                :class="{ 'scale-105': activeFeature === key }">
                        </TransitionGroup>
                    </div>
                </div>




            </div>
        </div>
    </main-layout>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import MainLayout from '../layouts/MainLayout.vue'
import { CheckCircleIcon, FolderIcon, ChevronDownIcon, CheckIcon } from '@heroicons/vue/24/solid'
import { useI18n } from 'vue-i18n'

const activeTab = ref('prototyping')
const tabs = [
    { key: 'prototyping', label: 'home.tabs.prototyping' },
    { key: 'production', label: 'home.tabs.production' }
]

// const features = [
//     'home.hero.production.features.process',
//     'home.hero.production.features.delivery',
//     'home.hero.production.features.pricing'
// ]

// Logo 数据
const logos = [
    { id: 1, src: '/images/partners/partner-logo-nikon.png', alt: 'nikon' },
    { id: 2, src: '/images/partners/partner-logo-toyota.png', alt: 'toyota' },
    { id: 3, src: '/images/partners/partner-logo-festo.png', alt: 'festo' },
    { id: 4, src: '/images/partners/partner-logo-microsoft.png', alt: 'microsoft' },
    { id: 5, src: '/images/partners/partner-logo-emerson.png', alt: 'emerson' }
];

const visibleLogos = ref([...logos]);
const isSliderPaused = ref(false);
let slideInterval: any = null;

const currentIndex = ref(0);
const slideStyle = computed(() => ({
    transform: `translateX(calc(-${currentIndex.value * 100}% / 4))`
}));

// 创建一个包含8个item的数组（两组logos）
const displayLogos = computed(() => {
    return [...logos, ...logos];
});

const slideNext = () => {
    currentIndex.value++;

    // 当移动到第一组的末尾时立即重置到开始位置
    if (currentIndex.value >= logos.length) {
        currentIndex.value = 0;
    }
};

const startSlider = () => {
    isSliderPaused.value = false;
    if (!slideInterval) {
        slideInterval = setInterval(slideNext, 3000);
    }
};

const pauseSlider = () => {
    isSliderPaused.value = true;
    if (slideInterval) {
        clearInterval(slideInterval);
        slideInterval = null;
    }
};

const logoWrapper = ref<HTMLElement | null>(null);
const updateLogoSize = () => {
    if (!logoWrapper.value) return;

    const containerWidth = logoWrapper.value.offsetWidth;
    const gap = 64; // gap between logos
    const numberOfLogos = 4;
    const totalGapWidth = gap * (numberOfLogos - 1);
    const logoWidth = (containerWidth - totalGapWidth) / numberOfLogos;

    // 设置新的logo尺寸，保持宽高比
    const heightRatio = 112 / 268; // 原始高宽比
    document.documentElement.style.setProperty('--logo-width', `${logoWidth}px`);
    document.documentElement.style.setProperty('--logo-height', `${logoWidth * heightRatio}px`);
};

// 监听窗口大小变化
window.addEventListener('resize', updateLogoSize);

// 组件挂载时启动轮播
onMounted(() => {
    startSlider();
    updateLogoSize();
});

// 组件卸载时清理定时器
onUnmounted(() => {
    if (slideInterval) {
        clearInterval(slideInterval);
    }
    window.removeEventListener('resize', updateLogoSize);
});

// 制造服务数据
interface ManufacturingService {
    id: number;
    title: string;
    description: string;
    image: string;
    isActive: boolean;
}

const originalManufacturingServices = [
    {
        id: 1,
        title: 'home.services.cnc.title',
        description: 'home.services.cnc.description',
        image: '/images/services/our-manufacturing-services-part1.webp'
    },
    {
        id: 2,
        title: 'home.services.injection.title',
        description: 'home.services.injection.description',
        image: '/images/services/our-manufacturing-services-part2.webp'
    },
    {
        id: 3,
        title: 'home.services.sheet.title',
        description: 'home.services.sheet.description',
        image: '/images/services/our-manufacturing-services-part3.webp'
    },
    {
        id: 4,
        title: 'home.services.printing.title',
        description: 'home.services.printing.description',
        image: '/images/services/our-manufacturing-services-part4.webp'
    },
    {
        id: 5,
        title: 'home.services.extrusion.title',
        description: 'home.services.extrusion.description',
        image: '/images/services/our-manufacturing-services-part5.webp'
    },
    {
        id: 6,
        title: 'home.services.die.title',
        description: 'home.services.die.description',
        image: '/images/services/our-manufacturing-services-part6.webp'
    },
    {
        id: 7,
        title: 'home.services.vacuum.title',
        description: 'home.services.vacuum.description',
        image: '/images/services/our-manufacturing-services-part7.webp'
    },
    {
        id: 8,
        title: 'home.services.wire.title',
        description: 'home.services.wire.description',
        image: '/images/services/our-manufacturing-services-part8.webp'
    }
];

const manufacturingServices = ref(originalManufacturingServices.map(service => ({
    ...service,
    isActive: false
})));

const handleServiceClick = (service: any) => {
    service.isActive = !service.isActive;
    // 这里可以添加更多点击后的逻辑，比如导航到详情页
};

const activeFeature = ref('quotation')

const featureImages = {
    quotation: '/images/features/feature-quotation.png',
    collaboration: '/images/features/feature-collaboration.png',
    chat: '/images/features/feature-chat.png',
    management: '/images/features/feature-management.png'
}

</script>

<style scoped>
.logo-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

.logo-wrapper {
    position: relative;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 20px;
    overflow: hidden;
}

.logo-slide {
    display: flex;
    align-items: center;
    gap: 64px;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.logo-item-wrapper {
    flex: 0 0 calc((100% - 64px * 3) / 4);
    /* 确保每个wrapper占据正确的宽度 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-item {
    height: var(--logo-height);
    width: var(--logo-width);
    object-fit: contain;
}

.paused .logo-slide {
    transition: none;
}

.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    will-change: transform;
}

.service-card>div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.service-card:hover .service-image-wrapper img {
    transform: scale(1.05);
}

.service-header {
    position: relative;
    z-index: 1;
}

.service-description {
    position: relative;
    z-index: 1;
}

.service-image-wrapper {
    flex: 1;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover .service-image-wrapper::after {
    opacity: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-card {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.feature-card:hover {
    transform: translateX(8px);
}


.card-content {
    backface-visibility: hidden;
}

.streamline-section {
    position: relative;
}

.streamline-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgb(239, 68, 68, 0.1), transparent);
}

.feature-card {
    backdrop-filter: blur(8px);
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

.feature-card:hover {
    transform: translateY(-2px);
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: scale(1.1);
}

/* 添加动画关键帧 */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.feature-card.active {
    animation: float 6s ease-in-out infinite;
}

.feature-item {
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(239, 68, 68, 0.05), transparent);
    opacity: 0;
}

/* 优化图片动画 */
.service-image-wrapper img {
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .service-image-wrapper img {
    transform: scale(1.05);
}
</style>